import { TComponent } from '@material/typeing';
import { FC, useRef, useEffect } from 'react';
import KTransition, { CssType } from '../transtion';
import $style from './index.scss';
export interface OverlayProps extends TComponent {
    zIndex?: number;
    visible?: boolean;
    onClick?: (e: any) => void;
    entering?: CssType;
    exiting?: CssType;
    exited?: (node: HTMLElement) => void;
    hasTransition?: boolean;
    appear?: boolean;
    unmountOnExit?: boolean;
    mountOnEnter?: boolean;
    preventScroll?: boolean;
    hasOverlay?: boolean;
    onTransitionEnd?: (e: TransitionEvent) => void;
}
const defaultProps = {
    entering: $style.show,
    exiting: $style.hidden,
    appear: true,
    unmountOnExit: true,
    mountOnEnter: true,
    preventScroll: false,
    hasOverlay: true
};

const Overlay: FC<OverlayProps> = function (props) {
    const {
        preventScroll,
        visible,
        children,
        appear,
        mountOnEnter,
        unmountOnExit,
        className,
        entering,
        exiting,
        hasTransition,
        hasOverlay,
        exited,
        onClick,
        onTransitionEnd,
        ...restProps
    } = { ...defaultProps, ...props };
    const overlayElement = useRef<HTMLDivElement>(null);
    const touchMove = (e: any) => {
        if (preventScroll) {
            e.preventDefault();
            return;
        }
    };

    useEffect(() => {
        if (!overlayElement.current) {
            return;
        }
        if (hasOverlay && !hasTransition && visible) {
            overlayElement.current.setAttribute('style', 'display: block;');
        }
        if (hasOverlay && !hasTransition && !visible) {
            exited && exited(overlayElement.current);
        }
    }, [hasOverlay, hasTransition, visible]);
    if (!hasOverlay) {
        return children;
    }
    return (
        <KTransition
            visible={visible}
            hasTransition={hasTransition}
            appear={appear}
            mountOnEnter={mountOnEnter}
            unmountOnExit={unmountOnExit}
            enter={(node) => {
                if (!node) {
                    return;
                }

                node.setAttribute('style', 'display: block;');
            }}
            entering={entering}
            exiting={exiting}
            exited={(node) => {
                if (!node) {
                    return;
                }
                if (!exited) {
                    node.setAttribute('style', 'display: none;');
                    return;
                }
                exited && exited(node);
            }}
            onTransitionEnd={onTransitionEnd}
        >
            <div
                ref={overlayElement}
                onTouchMove={touchMove}
                className={[$style.overlay, hasTransition ? $style.default : '', className]}
                onClick={onClick}
                {...restProps}
            >
                {children}
            </div>
        </KTransition>
    );
};

Overlay.displayName = 'Overlay';

export default Overlay;
